<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>常用样式</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<!--
     常用样式
     1.标题 h标签的效果自动改变 利用class实现h标签效果
     2. 利用small和span标签 形成副标题
     3.段落
         .lead 必须先加class
         <small></small>字体变小
         <b>或者<strong>:加粗
         <i>或者<em>:斜体
     4.强调
           .text-muted：提示，使用浅灰色（#999）
           .text-primary：主要，使用蓝色（#428bca）
           .text-success：成功，使用浅绿色（#3c763d）
           .text-info：通知信息，使用浅蓝色（#31708f）
           .text-warning：警告，使用黄色（#8a6d3b）
           .text-danger：危险，使用褐色（#a94442）
      5.对齐效果
           .text-left：左对齐
           .text-center：居中对齐
           .text-right：右对齐
           .text-justify：两端对齐。

      6.列表
           1.列表
                无序列表（<ul><1i>...</1i></ul>）
                有序列表（<ol><1i>...</1i></ol>）
                定义列表（<dl><dt>...</dt> <dd>...</dd> </dl>）
      7.代码风格
            （1）使用<code></code>来显示单行内联代码
            （2）使用<pre></pre>来显示多行块代码
             样式：pre-scro1lable（height，max-height高度固定，为34epx，超过存在滚动条）
            （3）使用<kbd></kbd>来显示用户输入代码，如快捷键
       8.表格
              基础样式
                  1）.table：基础表格
              附加样式
                  1）.table-striped：斑马线表
                  2）.table-bordered：带边框的表格
                  3），table-hover：鼠标悬停高亮的表格
                  4）.table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
-->

<h1>标题1<small>副标题</small></h1>
<h2>标题2</h2>
<div class="h1">标题3 <span class="small">副标题</span></div>
<p class="lead">利用 <small>small</small>和span标签 <b>形成</b> 副 <i>标题</i></p>

<hr>
<!--强调-->
<div class="text-muted">.text-muted：提示，使用浅灰色（#999）</div>
<div class="text-primary"> .text-primary：主要，使用蓝色（#428bca）  </div>
<div class="text-success"> .text-success：成功，使用浅绿色（#3c763d） </div>
<div class="text-info">    .text-info：通知信息，使用浅蓝色（#31708f） </div>
<div class="text-warning"> .text-warning：警告，使用黄色（#8a6d3b） </div>
<div class="text-danger">  .text-danger：危险，使用褐色（#a94442） </div>
<hr>
<!--对齐效果-->

<p style="text-align: right">text-left：左对齐 </p>
<p class="text-right">text-left：左对齐 .text-center：居中对齐</p>

<p class="text-center"> .text-center：居中对齐</p>
<p class="text-justify"> .text-justify：两端对齐。</p>

<hr>
<!-- 无序列表  -->
<ul>
    <li>无序列表一</li>
    <li>无序列表二</li>
</ul>
<!--有序列表-->
<ol>
    <li>有序列表一</li>
    <li>有序列表二</li>
</ol>
<!--有序自定义列表-->
<dl>
    <dt>HTML</dt>
    <dd>超文本</dd>
     <dt>CSS</dt>
    <dd>层叠样式</dd>

</dl>
<hr>

<!-- 无序列表  去点无样式-->
<ul class="list-unstyled">
    <li>无序列表一</li>
    <li>无序列表二</li>
</ul>
<!-- 无序列表  水平方向的列表 列联列表-->
<ul class="list-inline">
    <li>无序列表一</li>
    <li>无序列表二</li>
</ul>


<hr>
<!-- 代码-->
<!--单行代码-->
<p>class ProjectUser(models.Model): </p>
<code> class ProjectUser(models.Model): </code>
<!--快捷键-->
<p>使用 <kbd>ctrl</kbd>加<kbd>s</kbd>保存类容</p>

<!--多行代码，保留空格回车等-->
<pre>
def register(request):
    """ 注册 """
    if request.method == 'GET':
        form = RegisterModelForm()
        return render(request, 'web/register.html', {'form': form})

    form = RegisterModelForm(data=request.POST)
    if form.is_valid():
        # 验证通过，写入数据库（密码要是密文）
        # instance = form.save，在数据库中新增一条数据，并将新增的这条数据赋值给instance

        # 用户表中新建一条数据（注册）
        instance = form.save()

        # 方式二

        return JsonResponse({'status': True, 'data': '/web/login/'})

    return JsonResponse({'status': False, 'error': form.errors})
</pre>

<!--多行代码，显示HTML代码 ,使用字符实体-->
<pre>
 换小于大于号
    &lt;h2 &gt 你好&lt;/h2 &gt
</pre>
<!--当长度超过指定值，可以添加滚动条-->
<pre class="pre-scrollable">

    <ol>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>
        </ol>
</pre>

<hr>
<!--表格 如果觉得宽度太宽可以设置with-->
<table class="table table-hover table-hover table-condensed">
    <tr class="success">
        <th>javase</th>
        <th>数据库</th>
        <th>JavaScript</th>
    </tr>
    <tr class="">
        <td>面向对象</td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="">
        <td>数组</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>




</table>










    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>


